<template>
	<view class="vk-data-image-map">
		<!-- 背景图片区域 -->
		<image class="image" :src="src" mode="widthFix"></image>
		<!-- 内容区域 -->
		<view class="item" v-for="(item, index) in localdata" :key="index" :style="{
				top: item.top * 2 + 'rpx',
				left: item.left * 2 + 'rpx',
				width: item.width * 2 + 'rpx',
				height: item.height * 2 + 'rpx',
				border: border ? '1px solid ' + borderColor : '',
				borderRadius: item.shape === 'circle' ? '50%' : ''
			}" @click.stop="_click(item, index)"></view>
	</view>
</template>

<script>
	export default {
		name: "vk-data-image-map",
		emits: ["click"],
		props: {
			localdata: {
				type: Array,
				default: function() {
					return [];
				}
			},
			src: {
				type: String
			},
			border: {
				type: Boolean,
				default: false
			},
			borderColor: {
				type: String,
				default: "#cccccc"
			}
		},
		data: function() {
			return {};
		},
		mounted() {
			this.init();
		},
		methods: {
			// 初始化
			init() {},
			_click(item, index) {
				this.$emit("click", {
					item,
					index
				});
			}
		},
		// 计算属性
		computed: {
			
		}
	};
</script>

<style lang="scss" scoped>
	.vk-data-image-map {
		width: 100%;
		position: relative;

		.image {
			width: 100%;
			display: block;
		}

		.item {
			position: absolute;
		}

		.item:active {
			background-color: rgba(0, 0, 0, 0.2);
		}
	}
</style>